import { CSLine, pickedVertexData } from '@amcax/base';
import { PickInputRJSFFormat } from '@app-base/common/components/command-form/constants';
import { RJSFSchema } from '@rjsf/utils';
import { Vector3Tuple } from 'three-legacy';
import { RadioButtonFields } from '../cmd-common/radioButtonFields';
import { InputNumbersField } from '../cmd-common/input';

export type ChildLineCommandProps = {
  onClose: VoidFunction;
};
export type PreviewData = {
  line: CSLine;
};

export enum Mode {
  SELECT = 'select',
  INPUT = 'input',
}

export type FormType = {
  param?: number;
  type: Mode;
  start: pickedVertexData;
  second?: pickedVertexData;
  end: pickedVertexData;
  startInput: Vector3Tuple;
  secondInput?: Vector3Tuple;
  endInput: Vector3Tuple;
};

export const typeAgs = [
  { value: Mode.SELECT, label: '选择点' },
  { value: Mode.INPUT, label: '输入点' },
];

const pointItem = (
  title: string = '起点',
  type: Mode = Mode.SELECT,
): RJSFSchema => ({
  type: 'string',
  format: type === Mode.SELECT ? PickInputRJSFFormat.PickVertex : '',
  title: title || '',
});

export const schema: RJSFSchema = {
  type: 'object',
  properties: {
    type: {
      type: 'string',
      default: Mode.SELECT,
    },
  },
  allOf: [
    {
      if: {
        properties: {
          type: { const: Mode.SELECT },
        },
      },
      then: {
        properties: {
          start: pointItem(),
          end: pointItem('终点'),
        },
      },
    },
    {
      if: {
        properties: {
          type: { const: Mode.INPUT },
        },
      },
      then: {
        properties: {
          startInput: pointItem('起点', Mode.INPUT),
          endInput: pointItem('终点', Mode.INPUT),
        },
      },
    },
  ],
};
type pointItemUiType = {
  placeholder: string;
  type?: Mode;
  autofocus?: boolean;
  options?: any;
  prx?: string;
};
const pointItemUi = ({
  placeholder = '起点',
  type = Mode.SELECT,
  autofocus = false,
  options,
  prx = '请输入',
}: pointItemUiType): RJSFSchema => {
  const uiSchema = {
    'ui:placeholder': prx + placeholder,
    'ui:autofocus': autofocus,
    ...options,
  };
  return type === Mode.SELECT
    ? {
        ...uiSchema,
      }
    : {
        ...uiSchema,
        'ui:field': InputNumbersField,
        'ui:title': placeholder,
      };
};

export const extraUiSchema = {
  type: {
    'ui:field': RadioButtonFields,
    'ui:options': {
      options: typeAgs,
    },
  },
  start: pointItemUi({
    placeholder: '起点',
    autofocus: true,
    options: {
      'ui:classNames': 'no-label',
    },
  }),
  end: {
    'ui:placeholder': '请输入终点',
    'ui:classNames': 'no-label',
  },
  startInput: pointItemUi({
    placeholder: '起点',
    autofocus: true,
    type: Mode.INPUT,
  }),
  endInput: pointItemUi({
    placeholder: '终点',
    type: Mode.INPUT,
  }),
};
const TITLE = '通过点';
const pointItems = (title: 'X' | 'Y' | 'Z'): RJSFSchema => ({
  type: 'number',
  title: title,
  default: null,
});
export const curveSchema: { [key in Mode]: RJSFSchema } = {
  [Mode.SELECT]: {
    type: 'array',
    items: {
      type: 'object',
      title: TITLE,
      properties: {
        point: {
          type: 'string',
          title: TITLE,
          format: PickInputRJSFFormat.PickVertex,
        },
      },
    },
  },
  [Mode.INPUT]: {
    type: 'array',
    items: {
      type: 'object',
      title: TITLE,
      properties: {
        point1: pointItems('X'),
        point2: pointItems('Y'),
        point3: pointItems('Z'),
      },
    },
  },
};
export const extraUiCurve = {
  [Mode.SELECT]: {
    'ui:options': {
      classNames: 'command-form command-form-array command-form_cmd-spline',
    },
    items: {
      point: { 'ui:placeholder': '请输入通过点', 'ui:autofocus': true },
    },
  },
  [Mode.INPUT]: {
    'ui:options': {
      classNames: 'command-form command-form-array command-form_cmd-spline',
    },
    items: {
      point1: { 'ui:placeholder': 'X', 'ui:autofocus': true },
      point2: { 'ui:placeholder': 'Y' },
      point3: { 'ui:placeholder': 'Z' },
    },
  },
};

export const circleSchema: RJSFSchema = {
  type: 'object',
  properties: {
    type: {
      type: 'string',
      default: Mode.SELECT,
    },
  },
  allOf: [
    {
      if: {
        properties: {
          type: { const: Mode.SELECT },
        },
      },
      then: {
        properties: {
          start: pointItem('第一点'),
          second: pointItem('第二点'),
          end: pointItem('第三点'),
        },
      },
    },
    {
      if: {
        properties: {
          type: { const: Mode.INPUT },
        },
      },
      then: {
        properties: {
          startInput: pointItem('第一点', Mode.INPUT),
          secondInput: pointItem('第二点', Mode.INPUT),
          endInput: pointItem('第三点', Mode.INPUT),
        },
      },
    },
    {
      properties: {
        param: {
          type: 'number',
          title: '角度',
          exclusiveMinimum: 360,
          default: 360,
        },
      },
    },
  ],
};

export const circleUiSchema = {
  type: {
    'ui:field': RadioButtonFields,
    'ui:options': {
      options: typeAgs,
    },
  },
  start: pointItemUi({
    placeholder: '第一点',
    autofocus: true,
    options: {
      'ui:classNames': 'no-label',
    },
  }),
  second: pointItemUi({
    placeholder: '第二点',
    options: {
      'ui:classNames': 'no-label',
    },
  }),
  end: {
    'ui:placeholder': '请输入第三点',
    'ui:classNames': 'no-label',
  },
  startInput: pointItemUi({
    placeholder: '第一点',
    autofocus: true,
    type: Mode.INPUT,
  }),
  secondInput: pointItemUi({
    placeholder: '第二点',
    type: Mode.INPUT,
  }),
  endInput: pointItemUi({
    placeholder: '第三点',
    type: Mode.INPUT,
  }),
  param: {
    'ui:placeholder': '请输入角度',
  },
};
